<template>
  <div class="background"></div>
  <div class="admin-login">
    <div class="logo-box">
      <img src="@/assets/logo.png" alt="Logo" class="logo">
    </div>
    <div class="login-box">
      <form @submit.prevent="login">
        <div class="title">
          <h1>|    管理员登录</h1>
        </div>
        <div class="form-group">
          <label for="username"></label>
          <input type="text" id="username" placeholder="请输入用户名" v-model="username" required>
        </div>
        <div class="form-group">
          <label for="password"></label>
          <input type="password" id="password" placeholder="请输入密码" v-model="password" required>
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "adminLogin",
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 处理登录逻辑
      axios.post('/login/admin', {
        username: this.username,
        password: this.password
      })
          .then(response => {
            // 登录成功，获取 token
            const token = response.data;
            // 将 token 存储到 localStorage 或 sessionStorage
            localStorage.setItem('token', token);
            // 跳转到管理员页面
            this.$router.push('/AdminCity');
          })
          .catch(error => {
            // 登录失败，处理错误信息
            console.error('登录失败:', error);
            // 可以根据错误信息显示不同的提示信息
            alert('用户名或密码错误');
          });
    }
  }
};
</script>


<style scoped>
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('@/assets/background.png') no-repeat center center fixed;
}
.admin-login {
  position: relative;
  height: 100%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-box {
  width:300px;
  height: 300px;
  padding: 200px;
  margin-left: -200px;
  background-color: transparent;
}
.login-box {
  background-color: #fffeff;
  width: 300px;
  height: 350px;
  padding: 50px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.title h1{
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  padding: 8px;
  margin-left: -100px;
}
.logo {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}
.form-group {
  margin-bottom: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
  text-align: left;
}
input[type="text"],
input[type="password"] {
  width: 280px;
  padding: 8px;
  margin-top: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  rounded-radius: 50px;
  border-radius: 5px;
}
button {
  background-color: #0974af;
  color: white;
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
button:hover {
  background-color: #45a049;
}
</style>
